import React, { PureComponent, Fragment } from 'react';
import { connect } from 'dva';
import {
    Row,
    Col,
    Card,
    Form,
    Button,
    DatePicker,
    message,
    Divider,
    Badge,
    Table,
    Input,
    Select,
    Popconfirm,
    Icon
} from 'antd';
import { getAccess } from '@/utils/accessFunctions';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import OtaConfigModel from "./otaConfigModel";
import styles from './otaConfig.less';

const FormItem = Form.Item;

const statusMap = ['error', 'success'];
const status = ['未启用', '已启用'];

/* eslint react/no-multi-comp:0 */
@connect(({ menuTree }) => ({
    menuTree: menuTree.menuData,
}))
@Form.create()
class TableList extends PureComponent {
    state = {
        access: {},
        formValues: {},
        modalVisible: false,
        modalValues: {}
    };
    componentDidMount() {
        const {
            location: { pathname },
            menuTree,
        } = this.props;        

        const access = getAccess(pathname, menuTree);
        this.setState({
            access: access.childMap || {},
        });
    }

    // 重置
    handleFormReset = () => {
        const { form } = this.props;
        form.resetFields();
    };
    // 查询
    handleSearch = e => {
        e.preventDefault();

        const { dispatch, form } = this.props;
        form.validateFields((err, fieldsValue) => {
            if (err) return;
            
            console.log(...fieldsValue)
            // dispatch({
                //     type: 'obd/fetchQueryObdDeviceList',
                //     payload: values,
                // });
        });
    };
    handleModalVisible = (record)=>{
        this.setState({
            modalVisible:!!record
        })
    }
    /**
     * formList
     */
    renderForm() {
        const {
            form: { getFieldDecorator },
        } = this.props;
        return (
            <Form onSubmit={this.handleSearch} layout="inline">
                <Row gutter={16}>
                    <Col span={10}>
                        <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="功能开关">
                            {getFieldDecorator('aa', { initialValue: ''})(<Input placeholder="请输入" autoComplete="off" />)}
                        </FormItem>
                    </Col>
                    <Col span={10}>
                        <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="获取GPS数据频率">
                            {getFieldDecorator('bb', { initialValue: '' })(<Input placeholder="请输入" autoComplete="off"/>)}
                        </FormItem>
                    </Col>
                </Row>
                <Row gutter={16}>
                    <Col span={10}>
                        <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="数据上报频率">
                            {getFieldDecorator('cc', { initialValue: ''})(<Input placeholder="请输入" autoComplete="off" />)}
                        </FormItem>
                    </Col>
                    <Col span={10}>
                        <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="数据服务器地址">
                            {getFieldDecorator('dd', { initialValue: '' })(<Input placeholder="请输入" autoComplete="off"/>)}
                        </FormItem>
                    </Col>
                </Row>
                <Row gutter={16}>
                    <Col span={10}>
                        <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="MQTT终端账号">
                            {getFieldDecorator('ee', { initialValue: ''})(<Input placeholder="请输入" autoComplete="off" />)}
                        </FormItem>
                    </Col>
                    <Col span={10}>
                        <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="MQTT终端密码">
                            {getFieldDecorator('ff', { initialValue: '' })(<Input placeholder="请输入" autoComplete="off"/>)}
                        </FormItem>
                    </Col>
                </Row>
                <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
                    
                    <Col md={8} sm={24}>
                        <div>
                            <Button type="primary" htmlType="submit">
                                下发配置
                            </Button>
                            <Button style={{ marginLeft: 8 }} onClick={this.handleFormReset}>
                                重置
                            </Button>
                            <Button style={{ marginLeft: 8 }} onClick={()=>this.handleModalVisible(true)}>
                                pop
                            </Button>
                        </div>
                    </Col>
                </Row>
            </Form>
        );
    }
    /**
     * 终端列表模态框--返回和确认事件
     * submitHandle
     * cancelhandle
     */
    submitHandle = () => { 
        this.handleModalVisible()
    }
    cancelhandle = () => {
        this.handleModalVisible()
     }
    render() {       
        const { modalVisible } = this.state;
        const configModel = {
            submitHandle: this.submitHandle,
            cancelhandle:this.cancelhandle
        }
        return (
            <PageHeaderWrapper title="终端设备管理" Breadcrumb>
                <Card bordered={false}>
                    <div className={styles.tableListForm}>{this.renderForm()}</div>
                </Card>
                {
                    modalVisible?
                        <OtaConfigModel modalVisible={modalVisible} {...configModel} {...this.props} />
                    :null
                }
            </PageHeaderWrapper>
        );
    }
}

export default TableList;
